<template>
  <div id="colorBlock_1" style="min-height: 800px;">

    <!--详情界面顶端按钮条-->
    <el-row style="background-color: #ffffff;height: 45px;margin-top: 1px;">

      <el-button @click="back" icon="el-icon-arrow-left" type="primary" class="back" plain round>返回</el-button>

      <el-button-group class="options">
        <el-button
            v-if="functionButton==='vote' && active ===3 "
            icon="el-icon-document-copy"
            @click="voteResult"
            plain round>投票结果</el-button>
        <el-button
            v-if="functionButton==='qrcode' &&active ===2 "
            icon="el-icon-full-screen"
            @click="showQRcode"
            plain round>展示二维码</el-button>
        <el-button
            v-if="active === 3"
            icon="el-icon-s-promotion"
            @click="signInExport(Details.signInId)"
            plain round>导出数据</el-button>
        <el-button @click="recordDelete(Details.signInId)" style="margin-right: 10px" type="danger" plain round>删除签到<i class="el-icon-delete el-icon--right"></i></el-button>
      </el-button-group>

    </el-row>

    <!--该签到表的详细数据展示-->
    <el-table
        border
        :aria-modal="recordDetails"
        :data="recordDetails"
        style="width: 100%;">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form
              style="margin-left: 20px;"
              label-position="left"
              inline class="demo-table-expand">
            <el-form-item label="签到群组：">
              <span>{{ props.row.groupName }}</span>
            </el-form-item>
            <el-form-item label="发起人：">
              <span>{{ props.row.useName }}</span>
            </el-form-item>
            <el-form-item label="开始时间：">
              <span>{{ formatTime(props.row.startTime) }}</span>
            </el-form-item>
            <el-form-item label="结束时间：">
              <span>{{ formatTime(props.row.endTime) }}</span>
            </el-form-item>
            <el-form-item label="预签到人数：">
              <span>{{ props.row.expectNumber }}</span>
            </el-form-item>
            <el-form-item v-if="active === 3" label="已签到人数：">
              <span>{{ props.row.signedNumber }}</span>
            </el-form-item>
            <el-form-item v-if="active === 3" label="未签到人数：">
              <span>{{ props.row.unsignedNumber }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
          width="100"
          label="签到类型">
        <template slot-scope="scope">
          <span>
            {{formatType(scope.row.signInType)}}
          </span>
        </template>
      </el-table-column>
      <el-table-column
          label="签到群组"
          prop="groupName">
      </el-table-column>
      <el-table-column
          fixed="right"
          width="150"
          label="发布时间">
        <template slot-scope="scope">
          <span>
            {{formatTime(scope.row.startTime)}}
          </span>
        </template>
      </el-table-column>
    </el-table>

    <!--签到状态显示条-->
    <el-steps style="cursor:default;" :space="200" :active="active" finish-status="success" simple>
      <el-step title="发布签到"></el-step>
      <el-step title="正在进行"></el-step>
      <el-step title="签到结束"></el-step>
    </el-steps>

    <div class="line"></div>

    <!--投票情况显示卡片-->
    <transition name="el-zoom-in-top">
      <el-card
          v-show="voteCardVisible"
          style="box-shadow:rgba(192, 197, 194, 0.6);color: rgba(22,49,36,0.8);"
          class="box-card">

        <div slot="header" class="clearfix" style="text-align:center;margin-top: 5px;">
            <span style="font-size: 20px;font-weight: bold">{{this.Details.voteQuestion}}</span>
          <el-button @click="closeVoteResult" style="float: right;" type="text" icon="el-icon-arrow-up">收起</el-button>
        </div>

        <span class="voteAnswer">{{ this.Details.voteOption.split('+')[0]+' :'}}</span>
        <span class="voteAnswer">{{ this.Details.voteResult.substring(1,this.Details.voteResult.length-1).split(',')[0]}}</span>
        <el-progress :text-inside="true" :stroke-width="26" :percentage="option1"></el-progress>

        <span class="voteAnswer">{{ this.Details.voteOption.split('+')[1]+' :'}}</span>
        <span class="voteAnswer">{{ this.Details.voteResult.substring(1,this.Details.voteResult.length-1).split(',')[1]}}</span>
        <el-progress
            style="margin-bottom: 5px;"
            :text-inside="true" :stroke-width="26" :percentage="option2"></el-progress>
      </el-card>
    </transition>

    <!--二维码展示卡片-->
    <transition name="el-zoom-in-top">
      <el-card
          v-show="qrcodeCardVisible"
          style="box-shadow:rgba(192, 197, 194, 0.6);color: rgba(22,49,36,0.8);"
          class="box-card">

        <div slot="header" class="clearfix" style="text-align:center;margin-top: 5px;">
          <span style="font-size: 20px;font-weight: bold">签到二维码</span>
          <el-button @click="closeShowQRcode" style="float: right;" type="text" icon="el-icon-arrow-up">收起</el-button>
        </div>
<!--        <vue-qr style="display: block;margin:auto;max-width: 600px;width: 95%" :text="qrcode" :fit="fit" :size="600"></vue-qr>-->
        <div id="qrcode" style="display: block;margin:auto;max-width: 600px;width: 90%" ref="qrCodeUrl"></div>

<!--        <el-input-number v-model="refreshTime" @change="load" :min="3" :max="10" label="二维码刷新时间"></el-input-number>-->

      </el-card>
    </transition>

    <div class="line"></div>

    <!--学生签到情况页面-->
    <el-container style="margin-top: 1px;">

      <el-header style="padding: 0;">
        <el-menu
            text-color="rgba(23, 63, 45, 0.8)"
            mode="horizontal"
            router>
          <el-menu-item index="/sign-in/details/signed" style="width: 50%;font-size: 15px;text-align: center;font-weight: bold;">已签到</el-menu-item>
          <el-menu-item index="/sign-in/details/unsigned" style="width: 50%;font-size: 15px;text-align: center;font-weight: bold;">未签到</el-menu-item>
        </el-menu>
      </el-header>

      <el-main style="padding: 0;">
        <router-view />
      </el-main>

    </el-container>

  </div>
</template>


<script>
import request from "@/utils/request";
import Vue from "vue";
import QRCode from 'qrcodejs2'
import vueQr from 'vue-qr'

export default {
  name: "Details",
  components: {
    vueQr
  },
  data() {

    return {
      recordDetails: [],//表格数据
      Details:{},//与表格数据相同，便于操作
      active:this.$route.params.status+1,//签到状态
      functionButton:'',//顶端按钮栏的按钮展示类型
      voteCardVisible:false,//投票卡片展示
      qrcodeCardVisible:false,//二维码卡片展示
      // fit:'contain',//图片展示方式
      option1:0,//投票选项计数的百分比
      option2:0,
      qrcode:'',

      // refreshTime:3
    }
  },
  //初始化
  created() {
    this.load()
  },
  //二维码初始化
  mounted(){
    this.createQrCode();
  },
  //关闭时销毁计时器
  destroyed() {
    clearInterval(this.timer);
  },
  methods:{
    //页面数据加载
    load(){
      this.recordDetails=[this.$route.params.data]
      this.Details=this.$route.params.data
      this.functionButton=this.$route.params.type
      if(this.Details.signInType==='vote') {
        this.getOption()
      }
      //将该表数据加载到全局变量
      Vue.prototype.$detail = this.Details;
      //仅当签到期间才加载二维码计时器
      if(this.active === 2 &&this.functionButton==='qrcode'){
        this.timer = setInterval(async ()=>{
          const codeHtml = document.getElementById("qrcode");
          codeHtml.innerHTML = "";
          this.createQrCode();
        },3000)
      }
    },
    //计算投票选项百分比值
    getOption(){
      if(this.Details.signedNumber!==0){
        this.option1=parseInt(this.Details.voteResult.substring(1,this.Details.voteResult.length-1).split(',')[0])/this.Details.signedNumber*100
        this.option1=Number(this.option1.toString().replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1'))
        this.option2=100-this.option1
      }
    },
    //利用QRcode工具生成二维码
    createQrCode() {
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: this.Details.signInId+' '+(Date.now()+3000), // 需要转换为二维码的内容
        width: 600,
        height: 600,
        colorDark: '#000000',
        colorLight: '#ffffff',
      })
    },
    //转换签到类型的数据显示
    formatType(type){
      if(type==='click') return '点击签到';
      if(type==='location') return '定位签到';
      if(type==='vote') return '投票签到';
      if(type==='qrcode') return '扫码签到';
    },
    //转换时间类型的数据展示
    formatTime(time){
      return time[0]+'-'+
          (time[1]<10?'0'+time[1]:time[1])+'-'+
          (time[2]<10?'0'+time[2]:time[2])+' '+
          (time[3]<10?'0'+time[3]:time[3])+':'+
          (time[4]<10?'0'+time[4]:time[4])+':'+
          (time[5]<10?'0'+time[5]:time[5])
    },
    //页面返回
    back(){
      this.$router.push({
        name: 'Published'
      });
    },
    //展示投票卡片
    voteResult(){
      this.voteCardVisible=!this.voteCardVisible;
    },
    //关闭投票卡片
    closeVoteResult(){
      this.voteCardVisible=!this.voteCardVisible;
    },
    //展示二维码卡片
    showQRcode(){
      this.qrcodeCardVisible=!this.qrcodeCardVisible;
    },
    //关闭二维码卡片
    closeShowQRcode(){
      this.qrcodeCardVisible=!this.qrcodeCardVisible;
    },
    //根据该表id从服务端以excel文件导出签到数据
    signInExport(signInId){
      request.get('/published/downloadExcel/'+signInId,{responseType: 'arraybuffer'}).then((response) => {
        const link = document.createElement('a')
        link.style.display = 'none'
        const url = window.URL.createObjectURL(new Blob([response], { type: 'application/vnd.ms-excel' }))
        link.href = url
        link.setAttribute('download', signInId+'.xls')
        document.body.appendChild(link)
        link.click()
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    //根据表id发送删除请求
    recordDelete(signInId){
      //删除前提示
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.delete("/published/del/"+signInId).then(res =>{
          if(res){
            this.$message({message: '删除成功', type: 'success'});
            this.back()
          }else{
            this.$message({message: '删除失败', type: 'danger'});
          }
        })
      })
    },

  },
}
</script>

<style scoped>
#colorBlock_1{
  background-color: rgba(255, 255, 255, 0.8);
  max-width: 1000px;
  min-width: 400px;
  min-height: 600px;
  width: 99%;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 7%;
  border-radius: 10px;
  box-shadow: 2px 2px 3px rgba(192, 197, 194, 0.3);
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.back{
  margin-left: -2px;
  border-radius: 2px 20px 20px 2px;
  width: 80px;
}
.options{
  position: absolute;
  right: 0;
}
.el-button{
  font-size: 15px;
  margin-top: 5px;
}
.el-steps{
  background-color: white;
}
.line{
  width: 100%;
  height: 1px;
  border-top: solid rgba(162, 178, 171, 0.3) 1px;
}
.voteAnswer{
  margin-left: 20px;
  font-size: 20px;
  line-height: 40px;
}
.el-progress{
  width: 95%;
  margin-left: 2%;
}
#qrcode>>>canvas{
  width: 100% !important;
  height: 100% !important;
}
#qrcode>>>img{
  width: 100% !important;
  height: 100% !important;
}
</style>